import React, { useEffect, useState } from 'react';
import style from './one.module.css';
import { summerweather } from "../../../../../../compoents/icons";
import Holiday1 from '/src/assets/Holidayhottopics/1.webp';
import Holiday2 from '/src/assets/Holidayhottopics/2.webp';
import Holiday3 from '/src/assets/Holidayhottopics/3.webp';
import Holiday4 from '/src/assets/Holidayhottopics/4.webp';
import Holiday5 from '/src/assets/Holidayhottopics/5.png';
import Holiday6 from '/src/assets/Holidayhottopics/6.png';
import Holiday7 from '/src/assets/Holidayhottopics/7.png';
import Holiday8 from '/src/assets/Holidayhottopics/8.png';
import Holiday9 from '/src/assets/Holidayhottopics/9.png';
import Holiday10 from '/src/assets/Holidayhottopics//10.png';
import Holiday11 from '/src/assets/Holidayhottopics/11.png';
import Holiday12 from '/src/assets/Holidayhottopics/12.png';
import Holiday13 from '/src/assets/Holidayhottopics/13.png';
import Holiday14 from '/src/assets/Holidayhottopics/14.png';
import Holiday15 from '/src/assets/Holidayhottopics/15.png';
import Holiday16 from '/src/assets/Holidayhottopics/16.png';
import Holiday17 from '/src/assets/Holidayhottopics/17.png';
import Holiday18 from '/src/assets/Holidayhottopics/18.png';
import Holiday19 from '/src/assets/Holidayhottopics/19.png';
import Holiday20 from '/src/assets/Holidayhottopics/20.png';
import Holiday21 from '/src/assets/Holidayhottopics/21.png';
import Holiday22 from '/src/assets/Holidayhottopics/22.png';
import Holiday23 from '/src/assets/Holidayhottopics/23.png';
import Holiday24 from '/src/assets/Holidayhottopics/24.png';
import Holiday25 from '/src/assets/Holidayhottopics/25.png';
import Holiday26 from '/src/assets/Holidayhottopics/26.jpg';
import Holiday27 from '/src/assets/Holidayhottopics/27.png';
import Holiday28 from '/src/assets/Holidayhottopics/28.png';
import { PlusCircleOutlined } from '@ant-design/icons';

function Holidayhottopics() {
  const picture = () => {
    console.log(1112);
  }
  //是否显示左按钮
  const [leftflag1, setLeftFlag1] = useState(false)
  const [rightflag1, setRightFlag1] = useState(true)
  const [bool, setBool] = useState(false)
  //向左移动的偏移量
  const [leftPosition, setLeftPosition] = useState(0);
  //样式
  const [contentStyle1, setContentStyle1] = useState({
    width: '3100px',
    height: "100%",
    display: "flex",
    position: "absolute",
    transition: "left 0.3s linear",
    top: '0',
    left: "0"
  })
  const toright1 = () => {
    // 重置到最左边  
    setLeftPosition(prev => prev + 760);
    setBool(false)
  }
  const toleft1 = () => {
    setLeftPosition(prev => prev - 760);
    setLeftFlag1(true)
  }


  useEffect(() => {
    setContentStyle1(pre => ({
      ...pre,
      left: `${leftPosition}px`
    }))
    if (leftPosition <= -1400) {
      setRightFlag1(false)
      setLeftFlag1(true)
      setTimeout(() => {
        setBool(true)
      }, 500);
    }
    else if (leftPosition >= 0) {
      setRightFlag1(true)
      setLeftFlag1(false)
    }
  }, [leftPosition])
  return (
    <div className={style.Holidayhottopics}>
      <ul className={style.Holidayhottopicsul}>
        <li>
          <img src={Holiday1} alt="" />
          <div className={style.Solartermelements}>
            <h1>节气元素</h1>
            <p>582 张</p>
          </div>
          <div className={style.overlay}>
            <div className={style.overlay_content}>
              <ul className={style.overlay_contentul}>
                <li><img src={Holiday5} alt="" /></li>
                <li><img src={Holiday6} alt="" /></li>
                <li><img src={Holiday7} alt="" /></li>
                <li><img src={Holiday10} alt="" /></li>
                <li><img src={Holiday8} alt="" /></li>
                <li><img src={Holiday9} alt="" /></li>
              </ul>
              <h2 className={style.h2}>节气元素</h2>
              <p className={style.zhang}>582 张</p>
              <div className={style.butgeng}>立即查看</div>
            </div>
          </div>
        </li>
        <li>
          <img src={Holiday2} alt="" />
          <div className={style.Solartermelements}>
            <h1>生肖插画</h1>
            <p>1165 张</p>
          </div>
          <div className={style.overlay}>
            <div className={style.overlay_content}>
              <ul className={style.overlay_contentul}>
                <li><img src={Holiday11} alt="" /></li>
                <li><img src={Holiday12} alt="" /></li>
                <li><img src={Holiday13} alt="" /></li>
                <li><img src={Holiday14} alt="" /></li>
                <li><img src={Holiday15} alt="" /></li>
                <li><img src={Holiday16} alt="" /></li>
              </ul>
              <h2 className={style.h2}>生肖插画</h2>
              <p className={style.zhang}>1165 张</p>
              <div className={style.butgeng}>立即查看</div>
            </div>
          </div>
        </li>
        <li>
          <img src={Holiday3} alt="" />
          <div className={style.Solartermelements}>
            <h1>节日装饰</h1>
            <p>3088 张</p>
          </div>
          <div className={style.overlay}>
            <div className={style.overlay_content}>
              <ul className={style.overlay_contentul}>
                <li><img src={Holiday17} alt="" /></li>
                <li><img src={Holiday18} alt="" /></li>
                <li><img src={Holiday19} alt="" /></li>
                <li><img src={Holiday20} alt="" /></li>
                <li><img src={Holiday21} alt="" /></li>
                <li><img src={Holiday22} alt="" /></li>
              </ul>
              <h2 className={style.h2}>节日装饰</h2>
              <p className={style.zhang}>3088 张</p>
              <div className={style.butgeng}>立即查看</div>
            </div>
          </div>
        </li>
        <li>
          <img src={Holiday4} alt="" />
          <div className={style.Solartermelements}>
            <h1>劳动节</h1>
            <p>315 张</p>
          </div>
          <div className={style.overlay}>
            <div className={style.overlay_content}>
              <ul className={style.overlay_contentul}>
                <li><img src={Holiday23} alt="" /></li>
                <li><img src={Holiday24} alt="" /></li>
                <li><img src={Holiday25} alt="" /></li>
                <li><img src={Holiday26} alt="" /></li>
                <li><img src={Holiday27} alt="" /></li>
                <li><img src={Holiday28} alt="" /></li>
              </ul>
              <h2 className={style.h2}>劳动节</h2>
              <p className={style.zhang}>315 张</p>
              <div className={style.butgeng}>立即查看</div>
            </div>
          </div>
        </li>
      </ul>
      <div className={style.button} onClick={picture}>
        <span>更多素材</span>
      </div>
      <div className={style.ban1}>
        <h2>夏季天气</h2>
        <div className={style.log1}>
          <ul style={{ ...contentStyle1 }}>
            {
              summerweather.map((item, index) => {
                return <li key={index} className={style.logimg1}>
                  <img src={item.img} alt="" className={style.logim1} />
                </li>
              })
            }
          </ul>
          {
            leftflag1 ? <i className={style.zuo1} onClick={toright1}>&lt; </i> : ''
          }
          {
            rightflag1 ? <i className={style.you1} onClick={toleft1}> &gt;</i> : ''
          }
          {
            bool ? <div className={style.icon}><PlusCircleOutlined /></div> : ''
          }
        </div>
      </div>
    </div>
  );
}

export default Holidayhottopics;